<template>
  <div>
    <van-nav-bar @click-left="$router.go(-1)" :title="$route.name" left-arrow />



    <div class="sscon">
      <input class="sousuo iconfont" type="text"  :placeholder="msg" > 
    </div>
  <div class="sortInfo">
  
    <van-sidebar v-model="activeKey" @change='onChange'>
 <van-sidebar-item v-for='item in firstCate' :key='item.id' :title="item.catename" />
</van-sidebar>
 
 
<van-grid :border="false" :column-num="3">
  <h1 class="hot">热门精选</h1>
  <van-grid-item v-for='item in secondCate'  :to=" '/goodslist?id='+item.id" :key='item.id'>
    <van-image :src="item.img
              ? $img + item.img
              : 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1202016407,2376721892&fm=26&gp=0.jpg'" />
              <p>{{item.catename}}</p>
  </van-grid-item>
  <van-grid-item v-for='item in secondCate'  :to=" '/goodslist?id='+item.id" :key='item.img'>
    <van-image :src="item.img
              ? $img + item.img
              : 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1202016407,2376721892&fm=26&gp=0.jpg'" />
              <p>{{item.catename}}</p>
  </van-grid-item>
  <!-- <h1 class="hot">面部护肤</h1>
  <van-grid-item v-for='item in secondCate' :key='item.img'>
    <van-image :src="item.img
              ? $img + item.img
              : 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1202016407,2376721892&fm=26&gp=0.jpg'" />
              <p>{{item.catename}}</p>
  </van-grid-item> -->
  
</van-grid>
  </div>
  </div>
</template>

<script>
import {getCateTree}  from  '../util/axios'
export default {
  data() {
    return {
        activeKey:0,
          firstCate:[],
      secondCate:[],

      msg:'\ue60e按内容搜索'
    };
  },
  components: {},
  methods: {
      onChange(n){
    //  console.log(n);
    //  console.log(this.activeKey);
       this.secondCate = this.firstCate[this.activeKey].children
      },
      // goList(){
      //   console.log('111');

      //   // this.$router.push('/goodslist')
      // }
  },

  mounted(){
      getCateTree()
      .then(res=>{
   if(res.code==200){

       this.firstCate=res.list
        this.secondCate = res.list[0].children
   }
          console.log(res);
      })
  }
};
</script>

<style lang="" scoped>
.van-nav-bar {
  background-color: rgb(255, 96, 64);
}
.sortInfo{
    display: flex;
}
.van-grid{
    flex: 1;
}
</style>
